<template>
  <div class="workflow-list">
    <div class="header">
      <h2>工作流管理</h2>
      <el-button type="primary" @click="navigateToCreate">新建工作流</el-button>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
      <el-input
        v-model="search"
        placeholder="搜索工作流名称"
        style="width: 320px;"
        clearable
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    
    <!-- 工作流表格 -->
    <el-card>
      <el-table :data="filteredWorkflows" style="width: 100%">
        <el-table-column prop="name" label="名称" min-width="200" />
        <el-table-column label="节点数" width="100" align="center">
          <template #default="scope">
            {{ scope.row.nodes?.length || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="连接线数" width="120" align="center">
          <template #default="scope">
            {{ scope.row.connections?.length || 0 }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="180" align="center">
          <template #default="scope">
            {{ formatDate(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button size="small" type="success" @click="navigateToEdit(scope.row.id)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 空状态 -->
      <el-empty v-if="filteredWorkflows.length === 0" description="暂无工作流数据" />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { workflowMocks } from './workflow-mock-data'

const router = useRouter()
const workflows = ref<any[]>([])
const search = ref('')

// 本地存储相关
const STORAGE_KEY = 'workflow_list'

function getWorkflows() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  } catch {
    return []
  }
}

function setWorkflows(list: any[]) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
}

// 过滤后的工作流列表
const filteredWorkflows = computed(() => {
  if (!search.value) return workflows.value
  return workflows.value.filter(w => w.name.includes(search.value))
})

// 格式化日期
function formatDate(dateString: string) {
  if (!dateString) return '-'
  return new Date(dateString).toLocaleString()
}

// 导航到创建页面
function navigateToCreate() {
  router.push('/settings/workflow/new')
}

// 导航到编辑页面
function navigateToEdit(id: string | number) {
  router.push(`/settings/workflow/${id}`)
}

// 删除工作流
async function handleDelete(id: string | number) {
  try {
    await ElMessageBox.confirm('确定要删除该工作流吗？', '确认删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const newList = workflows.value.filter(w => w.id !== id)
    setWorkflows(newList)
    workflows.value = newList
    ElMessage.success('删除成功')
  } catch {
    // 用户取消删除
  }
}

// 初始化数据
onMounted(() => {
  let list = getWorkflows()
  if (!list || list.length === 0) {
    setWorkflows(workflowMocks)
    list = workflowMocks
  }
  workflows.value = list
})
</script>

<style scoped>
.workflow-list {
  padding: 24px;
  background: #f7f8fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.header h2 {
  margin: 0;
  color: #333;
}

.search-bar {
  margin-bottom: 24px;
}
</style> 